今天學習一段 Snippet 了解 React 專案中，Jest 與 React Testing Library 如何協作。

前置準備

• 執行：npx create-react-app --template typecript 建立 React 專案。

import React from "react";
import { render, screen } from "@testing-library/react";
import App from "./app";

test("Render a Button", () => {
    render(<App />);
    const linkEl = screen.getByText(/learn react/);
    expect(linkEl).toBeInTheDocument();
});

以上圖 Code Snippet 中可以知道：

• Jest 之前有使用過 test() 與 expect()。
• render() 與 screen 使用 React Testing Library，測試 Components。
• Jest 建立在 React 專案全域環境中，所有使用不需再做引入。

參考資源

• React Testing Tutorial - 7 - Anatomy of a Test